3.2 What to display

Motivations
- http://www.tru.ca includes a lot of information.
- Can you find some kind of granules, i.e., user interface components, included in the web page? Those gradules are called HTML elements.

What kind of HTML elements should be included in web content?
- Headings
- Paragraphs
- Images
- Links
- Lists
- Tables
- Forms - Here is an example.
  Enter username:
  Enter password:
- There are many others...

HTML Tutorial from W3Schools

In this section, you will study some basic HTML elements that are included in HTML files (i.e., web documents) and are displayed within web browser windows.
Read all in HTML Introduction, and try all the examples.
- How are tags and elements different?
- Which element includes the <title> element, not the 'title' attribute?
- Which elements are used for headings?
- Which element is used for a text paragraph?
- How can you declare HTML5 document type?
- Proper hierarchical structure is necessary.
```
<p>This is a <strong>very WRONG example.</p></strong> 
<p>This is a <strong>good example</strong>.</p> 
```
- Proper encapsulation of elements is necessary.
```
<ul>
    <li>You may include <p>"This is a proper example."</p> here.</li>
    <p><li>This is a WRONG example.</li> No good.</p> 
</ul>    
```
- Trial 1. Let's try the above two wrong examples, with the followings.
- Why do the above examples work fine with you browser? This is just because browsers are smart. This is not because the code is correct.
Read all in HTML Basic Examples, and try all the examples.
- List all the heading elements.
- Which heading element uses the same size font as the <p> element?
- What is 'href="..."' in an <a> element called?
- List 4 attributes used for the <img> element.
- List all the elements that we have discussed so far. html, head, body, title, h1, h2, h3, h4, h5, h6, p, a, img
- When two links are written in the same line, are they going to be displayed in the same line?
- How about images and paragraphs?
- Trial 2. Let's try h1, h2, h3, h4, h5, h6, p, a, and img ('html5.png'), with the followings.
  <h1>One<???> <???>Two</h2> <???>Three<???> <???>Four<???> <???>Five<???> <???>Six<???> <???>What a amazing world!</p> <??? target='_blank' ???='http://cs.tru.ca/'>cs.tru.ca</???> <??? ???='html5.png' width='50px' height='???px'>HTML5</img>
Read all in HTML Elements.
- Which element is used to define a line break?
- Can elements be nested?
- Trial 3. Let's try to put line breaks in a paragraph so that sentences start with new lines.
  <???> Students are introduced to the overview of web applications environment. Students learn major aspects of client-side components, including Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS), for static web documents. Students learn interactive web programming with Cascading Style Sheets. Students are introduced to the client-side script programming with JavaScript and Document Object Model (DOM) for further interactive web programming. <???>
Read all in HTML Attributes.
- What is an attribute?
- The syntax? What data type is used for attribute values?
- What does the 'title' attribute for the <p> element do?
- Can you use the 'title' attribute for other elements too? The 'title' attribute is one of global attributes.
- Can you include multiple attributes for an element? How? Do you have an example?
- List all the elements that we have discussed so far. html, head, body, title, h1, h2, h3, h4, h5, h6, p, a, img, hr, meta
- Trial 4. Let's try to give title, width, and height attributes for 'html5.png'.
  <??? ??? ??? ???='50px' ???> </img>
Read all in HTML Headings.
- Can you draw a horizontal line?
- Can you display multiple headings in the same line?
- What are meta elements in the head element? List some meta elements.
- Can you display a paragraph beside a heading?
- Trial 5. Let's try a horizontal line between a heading and a paragraph.
  <???>Web Technologies</h2> ??? <???> HTML, CSS, JavaScript, ... </p>
Read all in HTML Paragraphs.
- Can you put multiple spaces or multiple line spaces in a paragraph?
- What element do you have to use in order to put some lines at specific places?
- What element is used to display a block of pre-formatted text, with structured spaces and lines?
- List all the elements that we have discussed so far. html, head, body, title, h1, h2, h3, h4, h5, h6, p, a, img, hr, meta, br, pre
- Trial 6. Let's try a <pre>.
  ??? HTML, CSS, JavaScript ???
- In the above exercise, HTML, CSS, and JavaScript are displyed in the same line?
Read all in HTML Styles.
- Every element has a default style. Can you list the default style values, e.g., background color?
- How to change the default style?
- What is the syntax of the style attribute?
- What are CSS properties and their CSS values?
- List CSS properties for
  - Background color: background-color
  - Text color: color
  - Text font: font-family
  - Text size: font-size
  - Text alignment: text-align
  - Try different background colors for a <p> element or an <h> element. Try also right text alignment for a <p> element or an <h> element. What is the background of a <p> element or an <h> element?
  - You may need to think of a sort of dimension when text alignment is used.
- List all the attributes that we have discussed so far. href, src, alt, width, height, style
- List all the CSS properties that we have discussed so far. background-color, color, font-family, font-size, text-align
- More text formatting?
- Trial 7. Let's try background-color, text color, text size, text alignment with a paragraph.
  <p ???="???:20px; ???=Blue; ???=LightBlue; ???=???"> What a wonderful world! What a amazing world! ???
Read all in HTML Text Formatting Elements.
- Special types of text are
  - Bold text: b
  - Important text: strong
  - Italic text: i
  - Emphasized text: em
  - Marked text, or highlighted text: mark
  - Smaller text, and bigger text:small, big
  - Deleted text: del
  - Inserted text: ins
  - Subscripts: sub
  - Superscripts: sup
- How to highlight text?
- Can you list the elements used for the above special types?
- Trial 8. Let's try bold, italic, marked, deleted, inserted, subscript, superscript.
  ???Bold text??? ???Important text??? ???Italic text??? ???Emphasized text??? ???Marked text, or highlighted text??? ???Deleted text??? ???Inserted text??? ???Subscripts??? ???Superscripts???
Read all in Something more about HTML text formatting.
- Short quotations, using quotation marks - q
- Long quotations, using indentation - blockquote
- Abbreviations - abbr
- Definitions - def
- Contact information - address
- Title of a work - cite
- Do you really need the above elements? If so, why?
Read all in HTML Computer Code Elements.
- How to write computer program code? We need to use fixed letter size and spacing.
- List the three elements for this. Are they inline elements, i.e., are they displayed in the current line?
- How are they different from the <pre> element? Is the <pre> element an inline element? Try yourself.
- How to format mathematical variables?
- Do you really need the above elements? If so, why?
- Trial 9. Let's try <code> with 'var pi = 3.141593;'.
We have discussed some elements used for text formatting. Can you list them all from the headings?
Read all in HTML Comments.
- How to include multi-line comments?
- Trial 10. Let's try a comment.
  <p style="font-size:20px; color???Blue; background-color???LightBlue text-align???center"> What a wonderful world! ??? This part is a comment. ??? What a amazing world! ???
Read all in HTML Links.
- What can you link?
- What is a local link? What is an external link?
- How are absolute URLs and relative URLs different? E.g., href='images/tru.jpg' and href='http://cs.tru.ca/~mlee/comp2680/index.html'.
- How to open the link in a new tab window?
- How are _blank, _self, _parent different?
- Can you use an image as a hyperlink?
- Study the CSS properties used in the 2^nd last example.
- When a document is long, it is useful to use internal links. How? For example, click here to move to the top of the page. After you moved to the top, check the URL in the address field of the web browser. Is there any change?
- Can you write a web page so that the page can be displayed from the middle part, not from the top?
- Trial 11. Let's try two links with different target attribute values, _blank and _self, for http://cs.tru.ca.
Read all in HTML Images.
- For what is the alt attribute used?
- Can you enlarge/shrink the image when it is displayed?
- What if the image is stored in another directory, e.g., './images/myimg.jpg'?
- Can you display an image at the left/right side of a paragraph? If so, what CSS property is used for that?
- Trial 12. Let's try to use an image for a link, and anothe example of float. The image should be linked to 'https://www.w3.org/TR/html5/'. You can try with 'html5.png'.
  <p> Image on the left. ???<img ???></img></a> </p>

Read all in HTML Tables and HTML <table> border Attribute.

A <table> element includes multiple <tr> elements, and <tr> elements include multiple <td> elements. The first <tr> element my include <th> elements instead of <td> elements, for table heading.
```
<table>
    <tr><th>...</th>...<th>...</th></tr>
    <tr><td>...</td>...<td>...</td></tr>
    ...
    <tr><td>...</td>...<td>...</td></tr>
</table>
```
How is <th> different from <td>?
We will discuss about the related CSS properties later again.
Notice that 100% is used for the width CSS property. % or px can be used for the size. A question is whether every element has width and height.
Study carefully the 'colspan' attribute for the <td> and <th> elements. Is it also possible to span multiple rows for a cell?
What element is used to define a table caption?

Can you make this table?

Name and Age
Name		Age
Jill	Smith	50
Eve	Jackson	60
John	Doe	60	test

How to give some padding for all the cells? Set styles in each cell?

How to align all the names and ages to the center? Here is an example.

<table border="1" width='50%' style='border-collapse: collapse; text-align:center'>

Can you put an image in a table? Can you put a link into a table?
Trial 13. Let's try to write the code for the above table.
<??? ???> <???>Name and Age<???> <???> ??? </tr> <???> ??? </???> <???> ??? <???> <???> ??? <???> </table>

Read all in HTML Lists.
- Give the two different types of list.
- What CSS property is used to change order styles or bullet styles? CSS list-style-type Property.
- Is a nested list possible?
- Can you make a horizontal list?
- Trial 14. Let's try an ordered list and unordered lists inside the ordered list.
  <???> <???><h2>Contact Information</h2> <???> <???>Address: 900 McGill Rd, Kamloops, BC, Canada</li> <li>Phone: (250) 377-5000</li> </ul> </li> <???><h2>Education</???> <???> <???>University: Thompson Rivers University</???> </???> </???> </ol>
How to display another web content within a web page? Read all in HTML Iframes.
- For what do you use the <iframe> element?
- Can you display a linked content using an <a> element into an <iframe> element? If so, how?
- Trial 15. Let's try to display 'http://cs.tru.ca' in an iframe, with <a> and <iframe>. Use 'tr15-iframe' for the name of the iframe.
  <a ???>cs.tru.ca</a> <??? ???='tr15-iframe'> </iframe>
How to display reserved characters, e.g., '<'? Read all in HTML Entities.
- Trial 16. Let's try to display <p> and multiple spaces.
  How to display p surounded by '<' and '>'? ???<br> How to display four spaces ' '?<br> '???'

What else do you need to display?
- Elements used for user inputs. We will discuss them later.
Can you write a web page such as the next example?
You now know how to display and style elements. Can you now develop a web page such as http://www.tru.ca?
Lab 1.
- Read Simple CV - I
- Let's complete w1_cv.html using Notepad++, and execute the web appllication by double-clicking it.
- tiger.jpg

Learning outcomes
- Use of HTML elements - h1, h2, h3, h4, h5, h6, h7, p, a, img, table, ol, ul, li, b, i, br, hr, ...
- Use of attributes - src, href, width, height, style, colspan, rowspan, ...
- Use of CSS style properties - color, background-color, font-size, text-align, ...